<template>
    <div class="flex align-center pl-4 pr-4 pt-2 pb-2 cursor-pointer">
        <div class="diy-checkbox mr-2" v-if="props.multiple">
            <v-checkbox @click.stop="" label="" :value="props.item.raw[props.itemValue]" v-model="value"></v-checkbox>
        </div>
        <div>
            <div class="flex align-center mb-1">
                <!-- 标题 -->
                <div class="text-[14px] leading-[16px]">
                    <span :style="{
                        color: props.item.raw[props.itemLabelColor]
                    }">
                        {{ props.item.raw[props.itemTitle] }}
                    </span>
                    <span class="text-text--disabled">
                        ({{ props.item[props.itemValue] }})
                    </span>
                </div>
            </div>
            <!-- 描述 -->
            <div class="text-text--secondary text-[12px] leading-[14px]">{{ props.item.raw[props.itemDesc]
                }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
    item: {
        type: Object
    },
    multiple: {
        type: Boolean
    },
    itemTitle: {
        type: String,
        default: ''
    },
    itemDesc: {
        type: String,
        default: ''
    },
    itemValue: {
        type: String,
        default: ''
    },
    itemLabelColor: {
        type: String,
        default: ''
    }
});
const value = defineModel();
</script>

<style scoped>
.diy-checkbox :deep(.v-input__details) {
    display: none;
}

.diy-checkbox :deep(.v-selection-control__input) {
    width: 24px;
    height: 24px;
}

.diy-checkbox :deep(.v-selection-control__wrapper) {
    width: 24px;
    height: 24px;
}

.diy-checkbox :deep(.v-selection-control) {
    min-height: auto;
}
</style>